﻿@page "/progress-bar/labels"
@using Syncfusion.Blazor.ProgressBar
@inject NavigationManager Navigation
@using Syncfusion.Blazor
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a linear progress bar to demonstrate different types of labels rendering. </p>
</SampleDescription>
<ActionDescription>
    <p> This demo for Blazor Progress Bar control shows the linear progress bar with different labels format.</p>
</ActionDescription>

<div class="control-section">
    <div class="row linear-parent" align="center">

        <div class="linear-progress">
            <SfProgressBar @ref="ProObj1" Type="ProgressType.Linear" Height="40"
                           Width="100%" ID="Percentage"
                           TrackThickness="24"
                           ProgressThickness="24" Role="ModeType.Success"
                           ShowProgressValue="true"
                           Value="40" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarLabelStyle Text="40% Complete (Success)" TextAlignment="TextAlignmentType.Center" Color="@TextColor" />
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>

        <div class="linear-progress">
            <SfProgressBar @ref="ProObj2" Type="ProgressType.Linear" Height="40"
                           Width="100%" ID="Ratio"
                           TrackThickness="24"
                           ProgressThickness="24" Role="ModeType.Info"
                           ShowProgressValue="true"
                           Value="50" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarLabelStyle Text="50% Complete (Info)" TextAlignment="TextAlignmentType.Center" Color="@TextColor" />
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>

        <div class="linear-progress">
            <SfProgressBar @ref="ProObj3" Type="ProgressType.Linear" Height="40"
                           Width="100%" ID="Acutal"
                           TrackThickness="24"
                           ProgressThickness="24" Role="ModeType.Warning"
                           ShowProgressValue="true"
                           Value="60" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarLabelStyle Text="60% Complete (Warning)" TextAlignment="TextAlignmentType.Center" Color="@TextColor" />
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>

        <div class="linear-progress">
            <SfProgressBar @ref="ProObj4" Type="ProgressType.Linear" Height="40"
                           Width="100%" ID="Custom"
                           TrackThickness="24"
                           ProgressThickness="24" Role="ModeType.Danger"
                           ShowProgressValue="true"
                           Value="60" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarLabelStyle Text="70% Complete (Danger)" TextAlignment="TextAlignmentType.Center" Color="@TextColor" />
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
    </div>
    <div class="row" align="center">
        <button id="reLoad" class="e-control e-btn e-lib e-outline e-primary" @onclick="ProgressRefresh">Reload</button>
    </div>
</div>
@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4;
    string TextColor = "#FFFFFF";
    string ColorTrack = null;
    public async Task ProgressRefresh()
    {
        await ProObj1.RefreshAsync();
        await ProObj2.RefreshAsync();
        await ProObj3.RefreshAsync();
        await ProObj4.RefreshAsync();
    }
}

<style>
    #control-container {
        padding: 0px !important;
    }

    .linear-parent {
        text-align: center;
        margin-top: 2%;
    }

    .linear-button {
        text-align: center;
    }

    .linear-progress {
        width: 80%;
        margin: auto;
        margin-bottom: 3%;
    }

    [id$="Lineartrack"] {
        opacity: 1 !important;
    }

    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
    }
</style>

@code{
    string CurrentUri;
    Theme CurrentTheme;
    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
            ColorTrack = "#eee";
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            TextColor = "#000000";
            ColorTrack = "#969696";
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
        }
    }
}